<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>doc</title>
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<div class="info flex">
		<!-- 坐标 -->
		<div>
			<span>坐标</span>
			x=<span id="x">0</span>
			y=<span id="y">0</span>
		</div>
		<!-- 宽高 -->
		<div>宽高
			width=<span id="width">0</span>
			height=<span id="height">0</span>
		</div>


		<select value="" id="backgroundSelector" onchange="selectBackground()">
			<option value="red">红</option>
			<option value="green">绿</option>
			<option value="blue">蓝</option>
		</select>

		<!-- 用户在这里输入文字，失焦后把文字渲染到盒子中 -->
		<input type="text" id="text">
		<input type="text" id="tempDom">
		<input type="text" id="frequencyDom">

	</div>
	<div class="box" id="box">
		测试用例
	</div>

	<!-- 这个JS提供了属性 -->
	<script src="./script/data.js"></script>
	<!-- 这个JS提供了修改属性的方法 -->
	<script src="./script/dom.js"></script>
	<script src="./script/event.js"></script>
	<script>
		/* 页面初始化的时候执行了这些方法 */
		renderInfo()
		renderBox()
	</script>
</body>

</html>